<!--
 * @Author: 王灿
 * @Date: 2019-11-20 22:58:39
 * @LastEditTime: 2019-11-21 22:03:43
 * @Description: 商品标签
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-mark\index.vue
 -->
<template>
  <div class="commodity-mark">
    <el-row class="commodity-mark__row">
      <el-input v-model="markName" clearable></el-input>
      <el-button icon="el-icon-plus" @click="onBindMark"></el-button>
    </el-row>
    <el-row class="commodity-mark__row" v-for="(item,i) in row" :key="i">
      <el-input :value="item.name" clearable readonly></el-input>
      <el-button type="danger" icon="el-icon-delete" @click="onDeleteMark(item.name)"></el-button>
    </el-row>
  </div>
</template>

<script>
import { getBindMark, getDeleteMark } from '@/api/commodity'
export default {
  name: 'CommodityMark',
  props: {
    // 标签列表
    row: {
      type: Array,
      default: []
    },
    // 商品Id
    productId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      markName: ''
    }
  },
  watch: {
    // 监听数据改变清空已输入值
    row() {
      this.markName = ''
    }
  },
  methods: {
    // 绑定标签
    onBindMark() {
      if (this.markName === '') {
        return
      }
      getBindMark({
        productId: this.productId,
        markName: this.markName
      }).then(res => {
        this.$notify.success({
          title: '提示',
          message: '绑定标签成功'
        })
        this.onRefresh()
      })
    },
    // 删除标签
    onDeleteMark(markName) {
      getDeleteMark({
        productId: this.productId,
        markName: markName
      }).then(res => {
        this.$notify.success({
          title: '提示',
          message: '删除标签成功'
        })
        this.onRefresh()
      })
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        this.markName = ''
         let data = { isShow: false, isRefresh: true }
        this.$emit('onChangeMarkParent')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.commodity-mark {
  .commodity-mark__row {
    @include row;
    .el-button {
      padding: 8px 20px;
      margin-left: 10px;
      &.el-button--default {
        background: $bgColor;
        border-color: $bgColor;
        color: #fff;
      }
    }
  }
}
</style>